﻿@*HTML要素をロードする前に実行しておきたい処理を下記にて実施しているはず*@
@{
    ViewBag.Title = "Play";
}

<div id="bodyContainer" ng-app="QuizApp">
    <section id="content">
        <div class="container">
            <div class="row">
                <div class="flip-container text-center col-md-12" ng-controller="QuizCtrl as qc" ng-init="qc.nextQuestion()">
                    <div class="back" ng-class="{flip: qc.answered, correct: qc.correctAnswer, incorrect:!qc.correctAnswer}">
                        <p class="lead">{{qc.answer()}}</p>
                        <p>
                            <button class="btn btn-info btn-lg next option" ng-click="qc.nextQuestion()" ng-disabled="qc.working">Next Question</button>
                        </p>
                    </div>
                    <div class="front" ng-class="{flip: qc.answered}">
                        <p class="lead">{{qc.title}}</p>
                        <div class="row text-center">
                            <button class="btn btn-info btn-lg option" ng-repeat="option in qc.options" ng-click="qc.sendAnswer(option)" ng-disabled="qc.working">{{option.title}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@*HTML要素をロードした後に実行したい処理を下記にて実施ているはず
ある要素がロードされていることを前提とした処理が下記のスクリプトに含まれていると推測
    *@
@section scripts {
    @Scripts.Render("~/Scripts/angular.js")
    @Scripts.Render("~/Scripts/app/quiz-controller-ts.js")    
}